﻿<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/frame.css" />
<link rel="stylesheet" type="text/css" href="css/desk.css" />
<style type="text/css">

body{
	padding:20px;
}
.even{
	background:#eee;
}
.odd{
	background:#f2f399;
}
.optionsBox{
    height: 50px;
    line-height: 50px;
    background: #ccc;
    margin-bottom:20px;
    padding-left: 20px;
}
.button-bigBlue{
    padding: 5px 20px;
    height: auto;
    background: none repeat scroll 0% 0% #2492EE;
    color: #FFF;
    border: medium none;
    cursor: pointer;
    border-radius: 3px; 
}
</style>

</head>
<body>
    <div class="optionsBox">
        <button id="btn_data" class="button-bigBlue">修改数据(数据驱动)</button>
    </div>

    <div class="desk">
        <div class="app-create fl">
            <div class="app-create-hline"></div>
            <div class="app-create-vline"></div>
            <div class="app-create-text">新增基础服务</div>
        </div>
	    <!--模板 begin-->  
	    <div class="app-myapp fl ${bgcolor}" title="{{title}}">
	        <div class="app-myapp-shared">{{numbers.app.count}}</div>
	        <div class="app-myapp-photo icons"></div>
	        <div class="app-myapp-caption">{{title}}</div>
	        <div class="app-myapp-op">
	            <a target="_blank" href="http://{{url}}">{{url}}</a>
	        </div>
	    </div>
	    <!--模板 end-->  
        <h1 style="float:left;width:100px;height:100px;">this is H1</h1>
    </div>

</body>
</html>

<script src="js/jquery.js"></script>
<script src="js/template.4.0.js"></script>
<script>
/*数据*/
data = [
    {
        title:"我的应用1",
        url:"www.cnblogs.com/wsoft1",
        numbers:
        {
            app:{count:"100"}
        }
    },
    {
        title:"我的应用2",
        url:"www.cnblogs.com/wsoft2",
        numbers:
        {
            app:{count:"100"}
        }
    },
    {
        title:"我的应用2",
        url:"www.cnblogs.com/wsoft2",
        numbers:
        {
            app:{count:"100"}
        }
    },
    {
        title:"我的应用3",
        url:"www.cnblogs.com/wsoft3",
        numbers:
        {
            app:{count:"100"}
        }
    }
];



wTemplate.repeat({
    repeatElement : $(".app-myapp")[0],
    data : data,
    onloadBefore : function(){
        console.log("load before");
    },
    onload : function(){
        console.log("loaded");
    },
    onStateChange:function(item){
        //console.log(item);
    },
    render:function(object){
        var item = object.item;
        return {
            "numbers.app.count":item.numbers.app.count+"(个)"
        }
    }
});


/*数据驱动，当数据改变时，页面数据更新*/
$("#btn_data").on("click",function(){
    data[1].title = "modify data ui changed";
    data[1].url = "myurl";
    data[1].numbers.app.count = "2";
});
</script>

